<template>
	<view>
		<van-nav-bar
			title="写回访"
			left-text="返回"
			left-arrow
			@click-left="goBack"
		/>

		<view class="">
			<uni-list>
				<uni-list-item :showArrow="true" clickable
					@click="showTwoPicker_linkage"
					:rightText="pickerValue"
					:rightTextSize="26"
					rightTextColor="#1E1E1E"
					title="回访状态"
					:titleSize="26"
					titleColor="#8E8E8E"
					:show-extra-icon="true"
					:extra-icon="{
						color: '#333333',
						size: '17',
						type: 'spinner',
					}"
				></uni-list-item>
				<wzp-picker
					ref="wzpPicker"
					:mode="mode"
					:pickerList="pickerList"
					:defaultIndex="defaultIndex"
					@onConfirm="onConfirm"
				></wzp-picker>
				<timeSelector
					showType="yearToMinute"
					@btnConfirm="btnConfirm"
				>
					<uni-list-item :showArrow="true"
						:rightText="nextTime"
						:rightTextSize="26"
						rightTextColor="#1E1E1E"
						title="下次回访时间"
						:titleSize="26"
						titleColor="#8E8E8E"
						:show-extra-icon="true"
						:extra-icon="{
							color: '#333333',
							size: '17',
							type: 'spinner',
						}"
					></uni-list-item>
				</timeSelector>
				<uni-list-item 
					title="备注"
					:titleSize="26"
					titleColor="#8E8E8E"
					:showArrow="false"
					:show-extra-icon="true"
					:extra-icon="{
						color: '#333333',
						size: '17',
						type: 'spinner',
					}"
				></uni-list-item>
				<view class="" style="padding: 0 50upx">
					<textarea
						placeholder-style="color:#ccc"
						placeholder="请输入备注"
						v-model="note"
					/>
				</view>
			</uni-list>
		</view>
		<button type="default" class="btntext" :disabled="isDisabled" @click="save()">保存</button>
	</view>
</template>

<script>
import wzpPicker from "@/component/wzp-picker/wzpPicker.vue";
import timeSelector from "@/component/wing-time-selector/wing-time-selector.vue";
import navigation from "@/component/navigation.vue";
import sun from "@/utils/sun.js";
export default {
	components: {
		navigation,
		timeSelector,
		wzpPicker,
	},
	data() {
		return {
			reviewStatus: [], //回访状态
			reviewStatusValue: [[], []], //回访状态
			timeList: [[], []],
			timesIndex: [0, 0],
			nextTime: "", //下次回访时间
			note: "", //备注信息
			options: "",
			pickerValue: "",
			mode: "",
			pickerList: [],
			defaultIndex: [],
			isDisabled:false
		};
	},
	onLoad(options) {
		this.options = options;
		this.getFilter(); //回访状态
	},
	methods: {
		// 双列联动初始化
		showTwoPicker_linkage() {
			this.mode = "two_linkage";
			this.pickerList = this.reviewStatus;
			this.defaultIndex = [0, 0];
			this.$refs.wzpPicker.showPicker();
		},
		onConfirm(e) {
			this.timesIndex = e;
			this.pickerValue = this.pickerList[e[0]].title;
			this.note = this.pickerList[e[0]].children[e[1]];
		},
		//回访状态
		columnchange(e) {
			let column = e.detail.column;
			let value = e.detail.value;
			this.reviewStatus.map((item, index) => {
				if (column == 0) {
					if (value == index) {
						this.reviewStatusValue[1] = item.children;
					}
				}
			});
		},
		//时间选择
		btnConfirm(e) {
			this.nextTime = e.key;
		},

		//获取赛选条件 （回访状态）
		getFilter() {
			let that = this;
			sun.request({
				url: "/h5/customer.visit/create",
				// url:"h5/customer.search/items",
				showLoading: true,
				token: true,
				data: {},
				success(res) {
					if (res.code == 200) {
						that.reviewStatus = res.data.statusList;
						that.reviewStatus.map((item, index) => {
							that.reviewStatusValue[0].push(item.title);
							if (index == 0) {
								that.reviewStatusValue[1] = item.children;
							}
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					}
				},
			});
		},
		//保存
		save() {
			let that = this;
			if (this.pickerValue !== "无效客户" && !that.nextTime) {
				uni.showToast({
					icon: "none",
					title: "请选择下次回访时间",
				});
				return;
			}
			if (!that.note) {
				uni.showToast({
					icon: "none",
					title: "填写备注",
				});
				return;
			}
			that.isDisabled = true;
			sun.request({
				url: "/h5/customer.visit/doCreate",
				showLoading: true,
				token: true,
				data: {
					next_visit_time: that.nextTime,
					allocate_id: that.options.id,
					content: that.note ? that.note : "",
					status: that.pickerList[that.timesIndex[0]].id,
				},
				success(res) {
					if (res.code == 200) {
						uni.navigateBack({
							delta: 1,
						});
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 3000,
						});
					} else {
						that.isDisabled = false;
						uni.showToast({
							icon: "none",
							title: res.msg,
						});
					}
				},
			});
		},
	},
};
</script>

<style lang="less">
uni-page-body {
	padding-top: 0;
}
.title {
	width: 750upx;
	height: 64upx;
	line-height: 64upx;
	background: rgba(245, 246, 246, 1);
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(30, 30, 30, 1);
	padding-left: 52upx;
}
.btntext {
	position: fixed;
	bottom: 30upx;
	left: 50%;
	margin-left: -343upx;
	width: 686upx;
	height: 73upx;
	line-height: 73upx;
	background: rgba(64, 108, 235, 1);
	border-radius: 36upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
}
</style>
